import React, { Component } from 'react';
import { Card, Button, Upload, Modal } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { RichEditor } from 'ppfish';
import ImagesPreview from '@/components/ImagesPreview';
import XqUpload from '@/components/XqUpload';
import ImageCropUpload from '@/components/ImageCropUpload';
import styles from './style.less';

class Preview extends Component {
  state = {
    imgData: [
      {
        id: 1,
        name: '图片',
        src: 'http://s6.sinaimg.cn/mw690/003tzcWugy70fFioNtre5&690',
      },
      {
        id: 2,
        name: '图片2',
        src: 'https://v.feituapp.com/attachment/images/6/2019/06/rMFlfimOLEIOzI5vFLT1O9vu5p191V.jpg',
      },
    ],
    visible: false,
  };

  handleClick() {
    this.setState({ visible: true });
  }

  off() {
    this.setState({ visible: false });
  }

  handleCropUploadSuccess(resData, field, ki) {
    console.log('resData, field, ki===>>>>', resData, field, ki);
    this.off()
  }

  handleCropUploadFail(sts, field, ki) {
    console.log('sts, field, ki===>>>>', sts, field, ki);
  }

  render() {
    const { imgData, visible } = this.state;
    return (
      <PageHeaderWrapper>
        <Card title="头像裁剪">
          {/*<div className={styles.avatar}>*/}
            {/*<img src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png" alt=""/>*/}
          {/*</div>*/}
          {/*<Upload fileList={[]}>*/}
            {/*<div className={styles.button_view}>*/}
              {/*<Button icon="upload" onClick={() => this.handleClick()}>*/}
                {/*上传头像*/}
              {/*</Button>*/}
            {/*</div>*/}
          {/*</Upload>*/}

          <ImageCropUpload />

        </Card>
        <Card title="图片预览" style={{ marginTop: 24 }}>
          <ImagesPreview source={imgData}/>
        </Card>
        <Card title="富文本" style={{ marginTop: 24 }}>
          <RichEditor/>
        </Card>
        <Card title="上传" style={{ marginTop: 24 }}>
          <XqUpload/>
        </Card>
      </PageHeaderWrapper>
    );
  }
}

export default Preview;
